import { SoundOutlined } from "@ant-design/icons";
import { Drawer } from "antd";
import { useState } from "react";

interface IProps {
  className?: string;
}

export default function MessageIcon(props: IProps) {
  const { className } = props;
  const [open, setOpen] = useState(false);
  const showDrawer = () => {
    setOpen(true);
  };
  const onClose = () => {
    setOpen(false);
  };
  return (
    <>
      <SoundOutlined className={className} onClick={showDrawer} />
      <Drawer title="消息" placement="right" onClose={onClose} open={open}>
        <p>Some contents...</p>
        <p>Some contents...</p>
        <p>Some contents...</p>
      </Drawer>
    </>
  );
}
